<template>
    <div class="newObjectList">
        <div class="container">
            <div class="handle-box">
                <div class="title">进行中项目</div>
                <el-button
                    type="primary"
                    class="titleBtn reportBtn"
                    icon="el-icon-plus"
                    @click="handleReport"
                    v-if="projectInfo.reportstate == 0"
                >上报</el-button>
                <el-button
                    type="primary"
                    class="titleBtn reportBtn"
                    v-if="projectInfo.reportstate == 1"
                >审核通过</el-button>
                <el-button
                    type="primary"
                    class="titleBtn"
                    icon="el-icon-plus"
                    @click="handleReport"
                    v-else-if="projectInfo.reportstate === 2"
                >重新上报</el-button>
                <el-button
                    type="success"
                    class="titleBtn reportBtn"
                    v-if="projectInfo.reportstate == 3"
                >审核中</el-button>
                <el-button
                    type="primary"
                    class="titleBtn"
                    style="width:150px"
                    v-else-if="projectInfo.reportstate === 4"
                >已超过上报时间</el-button>
                <el-button
                    type="primary"
                    class="titleBtn"
                    icon="el-icon-plus"
                    @click="handleReport"
                    v-else
                    style="display:none"
                ></el-button>

                <el-button type="primary" @click="tableToExcel" class="titleBtn1">导出</el-button>
            </div>
            <div class="project">
                <div class="titleName">
                    <div class="projectId">
                        <div class="titles" style="color:#333">项目ID</div>
                        <div class="names">{{ projectInfo.projectid }}</div>
                    </div>
                    <div class="projectName">
                        <div class="titles" style="color:#333;">项目名称</div>
                        <el-tooltip popper-class="atooltip" placement="top">
                            <div slot="content" style="width:800px">{{projectInfo.projectname}}</div>
                            <div
                                class="names"
                                style="white-space: nowrap;
                             overflow: hidden;
                             text-overflow: ellipsis;"
                            >{{ projectInfo.projectname }}</div>
                        </el-tooltip>
                    </div>
                </div>
                <div class="projectContent">
                    <el-row :span="24" border>
                        <el-col :span="8" class="colList">
                            <div>登录密码</div>
                            <div>123456</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>合同总产值</div>
                            <div>{{ projectInfo.contractvalue }}万</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>所属事业部</div>
                            <div
                                style="white-space: nowrap;
                                      overflow: hidden;
                                      text-overflow: ellipsis;"
                            >{{ projectInfo.deptname }}</div>
                        </el-col>
                    </el-row>
                    <el-row :span="24">
                        <el-col :span="8" class="colList">
                            <div>工期</div>
                            <div class="items1">{{ projectInfo.period }}个月</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>关联ID</div>
                            <div class="items1">{{ projectInfo.userid }}</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>类型</div>
                            <el-tooltip
                                class="itemtooltip"
                                :content="projectInfo.category "
                                placement="top-end"
                            >
                                <div class="items1">{{ projectInfo.category }}</div>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <el-row :span="24">
                        <el-col :span="8" class="colList">
                            <div>开工时间</div>
                            <div>{{ projectInfo.startdate }}</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>区域（省）</div>
                            <div>{{ projectInfo.region }}</div>
                        </el-col>
                        <el-col :span="8" class="colList">
                            <div>实施状态</div>
                            <div class="items1">{{ projectInfo.state | isStatus }}</div>
                        </el-col>
                    </el-row>
                    <el-row :span="24" style="width:841px;">
                        <el-col :span="24">
                            <span>操作</span>
                            <div class="textBtn">
                                <!-- <el-button type="text" @click="handleOutput()">产值信息表</el-button> -->
                                <el-button type="text" @click="handleDecompose()">细化分解表</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <!-- 项目细化分解表 -->
        <el-dialog
            title="项目细化分解表"
            :visible.sync="decomposeVisible"
            width="70%"
            custom-class="output"
            :lock-scroll="false"
        >
            <div class="tableBox">
                <div class="selectMonthBox">
                    <button
                        class="monthItem"
                        :class="{timeChecked:isClick==index}"
                        @click="isChecked(index)"
                        v-for="(item,index) in timeList"
                        :key="index"
                    >{{item.reportTime}}</button>
                </div>
                <table id="table">
                    <thead>
                        <tr>
                            <th class="tableTitle m1">序号</th>
                            <th class="tableTitle" style="width:120px">分项内容</th>
                            <th class="tableTitle">上报时间</th>
                            <!-- <th class="tableTitle">上次完成工作量</th> -->
                            <th class="tableTitle">合同单价(元)</th>
                            <!-- <th class="tableTitle">当月完成产值</th> -->
                            <!-- <th class="tableTitle">当月完成工作量</th> -->
                            <th class="tableTitle">{{tableTitle}}</th>
                            <th class="tableTitle">{{tableTitle1}}</th>
                            <th class="tableTitle" style="width:150px">完成进度</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="(item, index) in projectSpecifyList"
                            :class="index % 2 == 0 ? 'tr1' : 'tr2'"
                            :key="index"
                        >
                            <td style="text-align:center">{{ item.orderNo }}</td>
                            <td
                                class="tdItem"
                                style="white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;"
                            >{{ item.subitem }}</td>
                            <td class="tdItem">{{ item.reportTime }}</td>
                            <!-- <td class="tdItem">{{ item.prevCompleted }}</td> -->
                            <td class="tdItem">{{ item.price }}</td>
                            <!-- <td class="tdItem">{{ item.monthCompletedValue }}</td> -->
                            <!-- <td class="tdItem">{{ item.monthCompleted }}</td> -->
                            <td class="tdItem" v-if="isClick == 0">{{ item.totalCompleted }}</td>
                            <td class="tdItem" v-if="isClick != 0">{{ item.monthCompleted }}</td>

                            <td class="tdItem" v-if="isClick == 0">{{ item.totalCompletedValue }}</td>
                            <td class="tdItem" v-if="isClick != 0">{{ item.monthCompletedValue }}</td>
                            <td class="tdItem tdItem1" v-if="isClick == 0">
                                <el-progress
                                    :color="customColors"
                                    :stroke-width="15"
                                    :percentage="
                                            ((Number(item.totalCompletedValue) * 100) / Number(item.price * item.quantity)).toFixed(0)
                                        "
                                ></el-progress>
                            </td>
                            <td class="tdItem tdItem1" v-if="isClick != 0">
                                <el-progress
                                    :color="customColors"
                                    :stroke-width="15"
                                    :percentage="
                                            ((Number(item.monthCompletedValue) * 100) / Number(item.price * item.quantity)).toFixed(0)
                                        "
                                ></el-progress>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="progress">
                    <div style="display:flex">
                        <span style="padding-right:64px;">总进度</span>
                        <el-progress
                            :color="customColors"
                            :stroke-width="15"
                            :percentage="percentage.toFixed(0)"
                        ></el-progress>
                    </div>
                </div>
                <div v-if="reportInfo">
                    <div style="display:flex">
                        <div class="check">
                            <div class="division" v-if="reportInfo.deptCheck == 1">
                                <p class="checkTitle">事业部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-success" style="font-size:33px;color:#07C160"></i>
                                    <p class="pass">已通过</p>
                                </div>
                            </div>
                            <div class="division" v-if="reportInfo.deptCheck == 2">
                                <p class="checkTitle">事业部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-error" style="font-size:33px;color:red"></i>
                                    <p class="pass" style="color:red">未通过</p>
                                </div>
                            </div>
                        </div>
                        <div class="check" style="width:200px;margin-left:50px;border-right:none">
                            <div
                                class="division"
                                style="width:200px;border-right:none;"
                                v-if="reportInfo.pdCheck == 1"
                            >
                                <p class="checkTitle">生产运营部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-success" style="font-size:33px;color:#07C160"></i>
                                    <p class="pass">已通过</p>
                                </div>
                            </div>
                            <div
                                class="division"
                                style="width:200px;border-right:none"
                                v-if="reportInfo.pdCheck == 2"
                            >
                                <p class="checkTitle">生产运营部审核</p>
                                <div class="ispass">
                                    <i class="el-icon-error" style="font-size:33px;color:red"></i>
                                    <p class="pass" style="color:red">未通过</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 意见审核 -->
                    <div
                        class="review"
                        v-if="reportInfo.deptCheck != 0 || reportInfo.pdCheck != 0 "
                    >
                        <p v-if="reportInfo.deptReason||reportInfo.pdReason">审核意见</p>
                        <div
                            class="reviewBox"
                            v-if="reportInfo.deptCheck != 0&&reportInfo.deptReason||reportInfo.pdReason "
                        >
                            <p>事业部审核意见:</p>
                            <p>{{ reportInfo.deptReason }}</p>
                        </div>
                        <div
                            style="margin-top:10px;border-top:1px solid #CCCCCC"
                            class="reviewBox"
                            v-if="reportInfo.pdCheck != 0"
                        >
                            <div
                                class="reviewBoxnext"
                                v-if="reportInfo.deptReason||reportInfo.pdReason"
                            >
                                <p>生产运营部审核意见:</p>
                                <p>{{ reportInfo.pdReason }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="tableBtnBox">
                <button class="btn1" @click="goBack">打回</button>
                <button class="btn2" @click="pass">通过</button>
            </div>-->
        </el-dialog>

        <!-- 上报信息 -->
        <el-dialog
            title="项目月进度上报信息审核"
            :visible.sync="reportVisible"
            width="1252px"
            custom-class="output"
            :lock-scroll="false"
        >
            <div class="tableBox">
                <table id="table">
                    <thead>
                        <tr>
                            <th class="tableTitle m1">序号</th>
                            <th class="tableTitle" style="width:120px">分项内容</th>
                            <th class="tableTitle">上报时间</th>
                            <th class="tableTitle">本月工作量</th>
                            <th class="tableTitle">预计工作量</th>
                            <th class="tableTitle">本月完成产值(元)</th>
                            <th class="tableTitle">预计产值(元)</th>
                            <th class="tableTitle">单位</th>
                            <th class="tableTitle" style="width:150px">完成进度</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="(item, index) in reportForm"
                            :class="index % 2 == 0 ? 'tr1' : 'tr2'"
                            :key="index"
                        >
                            <td style="text-align:center">{{ index + 1 }}</td>
                            <el-tooltip :content="item.subitem" placement="top">
                              <td
                                  class="tdItem"
                                  style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
                              >{{ item.subitem }}</td>
                            </el-tooltip>
                            <td class="tdItem">{{ item.reportTime }}</td>
                            <td class="tdItem">
                                <el-input
                                    maxlength="18"
                                    class="inputs"
                                    oninput="value=value.replace(/[^\d.]/g, '').replace(/^\./g, '').replace(/\.{2,}/g, '').replace('.', '$#$').replace(/\./g, '').replace('$#$','.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
                                    v-model="item.monthCompleted"
                                    @focus="getFocus(index)"
                                    :placeholder="item.quantity-item.totalCompleted"
                                    @input="inputMonthCompleted(item)"
                                />
                                <label
                                    class="calIcon"
                                    v-if="focusIndex==index&&isShowCalc"
                                    @click="getValue(item)"
                                >
                                    <img src="../../assets/img/对号 (1).png" />
                                </label>
                            </td>
                            <td class="tdItem tdItem1">
                              <span>{{item.quantity}}</span>
                            </td>
                            <td class="tdItem">
                                <el-input
                                    class="inputs"
                                    maxlength="18"
                                    :placeholder="item.sumPrice"
                                    disabled
                                    oninput="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')"
                                    v-model="item.monthCompletedValue"
                                />
                            </td>
                            <td class="tdItem tdItem1">
                              <span>{{item.sumPrice}}</span>
                            </td>
                            <td class="tdItem tdItem1">
                              <span>{{item.unit}}</span>
                            </td>
                            <td class="tdItem tdItem1">
                                <el-progress
                                    :color="customColors"
                                    :stroke-width="15"
                                    :percentage="item.report"
                                ></el-progress>
                            </td>
                        </tr>
                        <tr class="tr1">
                          <td class="progress_audit_statistic" colspan="3">统计</td>
                          <td class="progress_audit_statistic">{{progressAudit.monthCompleted}}</td>
                          <td class="progress_audit_statistic">{{progressAudit.quantity}}</td>
                          <td class="progress_audit_statistic">{{progressAudit.monthCompletedValue}}</td>
                          <td class="progress_audit_statistic">{{progressAudit.sumPrice}}</td>
                          <td class="progress_audit_statistic"></td>
                          <td class="progress_audit_statistic"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tableBtnBox">
                <button class="btn1" @click="cancle">取消</button>
                <button class="btn2" @click="report">上报</button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// import { fetchData } from '../../api/index';
import { getProjectList, specifyList, progress, reportRecord, workOutput } from '@/api/index.js';
import { throttle } from '@/utils/tools.js';
export default {
    // name: 'basetable',
    data() {
        /**
         * optionUint:项目月进度统计单位数据
         */
        return {
            tableTitle: '累计完成工作量',
            tableTitle1: '累计完成产值(元)',
            isClick: 0, //细化分解是否选中
            reportFlag: false,
            percentage: 0, //总进度
            textarea: '', //意见审核
            tableData1: '',
            // idx: -1,
            // id: -1,
            projectTable: [],
            projectids: localStorage.getItem('projectid'),
            outputVisible: false,
            decomposeVisible: false,
            reportVisible: false,
            customColors: [
                { color: '#7ED321', percentage: 60 },
                { color: '#F5A623', percentage: 90 },
                { color: '#D0021B', percentage: 100 }
            ],
            params: {
                state: 1,
                projectid: localStorage.getItem('projectid'),
                projectname: localStorage.getItem('projectname'),
                page: 1
            },
            reportForm: [],
            reportInfo: {},
            projectInfo: {},
            projectSpecifyList: [], //细化分解列表
            totals: '', //总产值
            reports: true, //是否符合上报状态
            reports1: true,
            timeList: [
                {
                    reportTime: '总计'
                }
            ],
            timeData: {
                projectid: localStorage.getItem('projectid'),
                reportTime: ''
            },
            isShowCalc: false, //判断是否计算过产值
            focusIndex: 0,
            optionUint: ['宗','户','平方米','米','公里','平方公里']
        };
    },
    created() {
        this.getDoingProjectList();
    },
    mounted() {
        this.getSpecifyList();
    },
    computed: {
      progressAudit() {
        const res = {
          monthCompleted: 0,
          monthCompletedValue: 0,
          sumPrice: 0,
          quantity: 0
        }
        if (Array.isArray(this.reportForm)) {
          this.reportForm.forEach(ele => {
            for(const i in res) {
              res[i] += parseFloat(ele[i])
            }
          })
        }
        return res
      }
    },
    filters: {
        isStatus(data) {
            if (data === 0) {
                return '新项目';
            } else if (data === 1) {
                return '进行中';
            } else if (data === 2) {
                return '已完成';
            } else if (data === 3) {
                return '待验收';
            } else if (data === 4) {
                return '停工';
            } else if (data === 5) {
                return '已验收';
            }
        },
        fliterMessage(message) {
            if (message.length > 10) {
                return message.substring(0, 10) + '...';
            }
        }
    },
    methods: {
        // 点击产值信息表操作
        handleOutput() {
            specifyList({ projectid: localStorage.getItem('projectid') }).then((res) => {
                if (res.code === 200) {
                    this.projectSpecifyList = res.result.specifyList;
                }
            });
            this.outputVisible = true;
        },
        //点击细化分解表操作
        handleDecompose() {
            this.isClick = 0;
            this.timeData.reportTime = '';
            this.getSpecifyList();
            this.getreportRecord();
            this.decomposeVisible = true;
        },
        //点击上报按钮操作
        handleReport() {
            // alert(this.projectInfo.reportstate);
            let date = new Date();
            let time = date.getFullYear() + '-' + String(Number(date.getMonth()) + 1).padStart(2, 0);
            console.log(time); //获取当前月份(0-11,0代表1月)
            this.timeData.reportTime = time;
            this.getSpecifyList();
            this.reportVisible = true;
        },
        //定义产值信息表进度颜色
        customColorMethod(percentage) {
            if (percentage < 60) {
                return '#909399';
            } else if (percentage < 90) {
                return '#e6a23c';
            } else {
                return '#67c23a';
            }
        },
        //上报的时候
        //获取项目部-进行中项目-项目详情信息
        getDoingProjectList() {
            getProjectList(this.params).then((res) => {
                if (res.code === 200) {
                    this.projectInfo = res.result.projectList[0];
                    this.tableData1 = res.result.projectList;
                }
            });
        },
        //获取项目细化分解表
        getSpecifyList() {
            this.totals = this.projectInfo.contractvalue * 10000;
            let a = this.timeData;
            specifyList(a).then((res) => {
                // console.log(res.result.specifyList);
                if (res.code == 200) {
                    this.reportForm = res.result.specifyList;
                    this.reportInfo = res.result.reportInfo;
                    this.projectSpecifyList = res.result.specifyList;
                    this.reportForm.forEach((item) => {
                        item.oldReport = item.report;
                    });
                }
                //累计完成总产值
                let s = res.result.specifyList.reduce((sum, cur) => {
                    return Number(cur.totalCompletedValue) + Number(sum);
                }, []);
                this.percentage = (s / this.totals) * 100;
            });
        },
        //点击取消按钮
        cancle() {
            this.reportVisible = false;
            this.focusIndex = 0;
            this.isShowCalc = false;
        },
        //修改本月工作量
        checkValue(val, price) {
            // if(val*>)
            alert(price);
        },
        //点击上报
        report: throttle(function () {
            console.log(this.reports);
            if (this.reports) {
                let arr = [];
                for (var i = 0; i < this.reportForm.length; i++) {
                    var specifyid = this.reportForm[i].id;
                    var completed = this.reportForm[i].monthCompleted;
                    // if(completed>projectInfo.contractvalue*1000){
                    //     this.$message.error("本月完成工作量超出上限");
                    //     arr=[];
                    //     return;
                    // }
                    var completedValue = this.reportForm[i].monthCompletedValue;
                    arr.push({ specifyid: specifyid, completed: completed, completedValue: completedValue });
                }
                console.log('completedValue', completedValue);
                for (var i = 0; i < this.reportForm.length; i++) {
                    if (!this.reportForm[i].isCal) {
                        this.$message.error('请根据工作量正确计算产值');
                        return;
                    }
                }
                if (completedValue !== '' && completed !== '') {
                    progress({ progress: JSON.stringify(arr), projectid: localStorage.getItem('projectid') }).then((res) => {
                        if (res.code == 200) {
                            this.projectInfo.reportstate = 3;
                            this.$message.success(res.message);
                            this.reportVisible = false;
                        } else {
                            this.$message.error('请正确填写上报内容');
                        }
                        console.log(res);
                    });
                } else if (completed == '') {
                    this.$message.error('请填写各分项的本月工作量');
                } else if (completedValue == '') {
                    this.$message.error('请填写各分项的本月完成产值');
                }
            }
        }, 1000),
        //根据工作量计算产值
        inputMonthCompleted(item) {
            item.isCal = false;
        },
        //导出
        //点击导出
        tableToExcel() {
            //列标题
            this.getDoingProjectList();
            this.getdaochu();
        },
        //导出数据
        getdaochu() {
            this.tableData1.filter((item, index) => {
                item.id = index + 1;
                item.state = '进行中';
                item.period = item.period + '个月';
                item.deptid = `"${item.proSpecifyList.join(`\r\n`)}"`;
                item.reportstate = (Number(item.totalCompletedValue) / (Number(item.contractvalue) * 100)).toFixed(0) + '%';
                item.contractvalue = item.contractvalue + '万';
                item.reportday = (item.totalCompletedValue / 10000).toFixed(2) + '万';
                item.totalCompletedValue = '';
                item.proSpecifyList = '';
                item.timeSchedule = '';
                // item.coefficient =0.2
                // Object.keys(item).forEach(key=>{
                //     if(!item[key]&&item[key]!==0){
                //         state=false
                //         return state
                //     }
                // })
            });
            console.log('tabData1' + this.tableData1);
            // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
            let str = `序号,项目ID,项目名称,合同总产值,所属事业部,开工时间,工期,关联用户ID,区域(省),实施状态,项目类型,完成产值,完成进度,分项信息\n`;
            //增加\t为了不让表格显示科学计数法或者其他格式
            for (let i = 0; i < this.tableData1.length; i++) {
                for (let item in this.tableData1[i]) {
                    str += `${this.tableData1[i][item] + '\t'},`;
                }
                str += '\n';
            }
            //encodeURIComponent解决中文乱码
            let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
            //通过创建a标签实现
            let link = document.createElement('a');
            link.href = uri;
            //对下载的文件命名
            link.download = '进行中的项目数据表.csv';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },
        //细化分解获取项目汇报记录
        getreportRecord() {
            this.timeList = [{ reportTime: '总计' }];

            let param = this.timeData;
            reportRecord(param).then((res) => {
                if (res.code == 200) {
                    this.timeList = this.timeList.concat(res.result.timeList);
                    console.log(this.timeList);
                }
            });
        },
        //点击细化分解选择时间
        isChecked(index) {
            this.isClick = index;

            if (index == 0) {
                this.timeData.reportTime = '';
                this.tableTitle = '累计完成工作量';
                this.tableTitle1 = '累计完成产值(元)';
            } else {
                this.timeData.reportTime = this.timeList[index].reportTime;
                this.tableTitle = '当月完成工作量';
                this.tableTitle1 = '当月完成产值(元)';
            }
            this.getSpecifyList();
        },
        //输入框获得焦点
        getFocus(index) {
            this.focusIndex = index;
            this.isShowCalc = true;
        },
        getValue(item) {
            let params = {
                num: item.monthCompleted,
                price: item.price,
                report: item.oldReport,
                sumNum: item.quantity
            };
            workOutput(params).then((res) => {
                if (res.code == 200) {
                    console.log(res);
                    item.monthCompletedValue = res.result.completedValue;
                    // this.isShowCalc=false;
                    item.isCal = true;
                    item.report = res.result.report;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.el-tooltip__popper {
    width: 800px !important;
}
.container {
    min-height: 600px;
    padding-left: 30px;
}
.handle-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.title {
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
}
.titleBtn {
    background: rgba(208, 2, 27, 1);
    color: #fff;
    border: none;
    font-size: 16px;
    width: 109px;
    height: 35px;
    text-align: center;
    margin-left: 66px;
}
.reportBtn {
    background: rgba(33, 74, 143, 1);
    color: #fff;
    border: none;
    font-size: 16px;
    width: 90px;
    height: 35px;
    text-align: center;
    margin-left: 66px;
}
.titleBtn1 {
    background: rgba(0, 79, 171, 0.2);
    color: rgba(0, 79, 171, 1);
    border: none;
    width: 90px;
    height: 35px;
    margin-left: 25px;
    font-size: 16px;
}
.project {
    // border:1px solid #eee;
    max-width: 2000px;
    padding-left: 30px;
    .titleName {
        height: 80px;
        width: 1300px;
        line-height: 36px;
        font-size: 20px;
        // border: 1px solid #eee;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        .projectId {
            margin-right: 60px;
            width: 350px;
        }
        .projectId,
        .projectName {
            .titles {
                float: left;
                margin-right: 20px;
            }
            div:nth-child(2) {
                color: #666;
                margin-left: 28px;
                // padding-left:28px
            }
        }
        .projectName {
            max-width: 800px;
            word-wrap: break-word;
        }
    }
}
.projectContent {
    width: 840px;
    cursor: pointer;
    /deep/ .el-col {
        height: 44px;
        line-height: 44px;
        color: #333;
        font-size: 16px;
        padding-left: 22px;
        background: rgba(184, 216, 255, 0.05);
        border: 1px solid rgba(184, 216, 255, 1);
        overflow: hide;
        margin-top: -1px;
        margin-left: -1px;
        display: flex;
        align-items: center;
    }
    .colList {
        div:nth-child(1) {
            flex: 2;
            color: #333;
            font-weight: 500;
        }
        div:nth-child(2) {
            flex: 3;
            font-size: 14px;
            font-weight: 400;
            color: #666;
        }
    }
    .textBtn {
        margin-left: 65px;
    }
}
.tableTitle {
    background: rgba(184, 216, 255, 0.2);
    border: 1px solid rgba(184, 216, 255, 1);
    margin: 0;
    min-width: 80px;
    height: 40px;
}
.newObjectList >>> .el-dialog__body {
    padding: 0 20px 30px 30px;
}
.tr1 {
    height: 40px;
}
.tr2 {
    height: 40px;
    background: rgba(184, 216, 255, 0.05);
}
#table {
    width: 100%;
    border-collapse: collapse;
}
#table td {
    border: 1px solid rgba(184, 216, 255, 1);
}
.tdItem {
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    height: 40px;
    white-space: nowrap;
    // overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.tableBox {
    min-height: 300px;
}
.doingObject/deep/.el-dialog__body {
    max-height: 800px;
    min-height: 563px;
    overflow-y: scroll;
}
.doingObject/deep/.el-progress-bar__outer {
    width: 90px;
}
.progress {
    width: 100%;
    border: 1px solid rgba(184, 216, 255, 1);
    border-top: none;
    box-sizing: border-box;
    height: 60px;
    // line-height:60px;
    padding: 0 20px;
    div {
        width: 477px;
        display: flex;
        height: 60px;
        align-items: center;
        span {
            width: 80px;
        }
    }
}
.check {
    margin-top: 20px;
    .division {
        // width: 120px;
        border-right: 1px solid #cccccc;
        .checkTitle {
            font-size: 16px;
            margin-bottom: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: 22px;
        }
        .ispass {
            display: flex;
            align-items: center;
            padding-right: 37px;
            .pass {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(7, 193, 96, 1);
                // width:85px;
                margin-left: 14px;
            }
        }
    }
}
.review {
    margin-top: 20px;
    p {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-bottom: 10px;
    }
}
.reviewBox {
    padding: 24px 0 10px 0;
    display: flex;
    p:nth-child(1) {
        width: 182px;
        margin-right: 37px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 25px;
    }
    p:nth-child(2) {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 25px;
    }
}
.tableBtnBox {
    margin-top: 30px;
    text-align: center;
    .btn1 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 0.2);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 79, 171, 1);
        margin-right: 56px;
    }
    .btn2 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 1);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
}
.tdItem1 {
    width: 140px;
    padding: 0 0 0 10px;
    text-align: left;
    // white-space: nowrap;
    box-sizing: border-box;
}
.inputs {
    width: 150px;
    height: 32px;
    text-align: center;
}
.items1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tdItem/deep/.el-progress-bar {
    width: 144px;
}
.el-progress {
    display: flex;
    align-items: center;
}
.project/deep/.el-col-8 {
    width: 281px;
    height: 44px;
}
.progress/deep/.el-progress__text {
    margin-left: 22px !important;
    word-wrap: break-word;
}
.selectMonthBox {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #004fab;
    margin-bottom: 30px;
    padding-left: 50px;
    box-sizing: border-box;
    // overflow-x:scroll;d
    flex-wrap: wrap;
    .monthItem {
        margin-top: 5px;
        width: 93px;
        height: 35px;
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        border: 1px solid rgba(198, 203, 212, 1);
        text-align: center;
        margin-right: 15px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
    }
}
.timeChecked {
    background: rgba(0, 79, 171, 1) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 79, 171, 1) !important;
}
.reviewBoxnext {
    display: flex;
    p:nth-child(1) {
        width: 182px;
        margin-right: 37px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 25px;
    }
    p:nth-child(2) {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 25px;
    }
}
.itemtooltip {
    width: 600px;
}
.calIcon {
    display: inline-block;
    border: 1px solid #214a8f;
    width: 16px;
    height: 16px;
    img {
        width: 12px;
        height: 12px;
    }
}
// 项目月进度上报信息审核
.progress_audit_statistic {
  text-align: center;
}
</style>
